
<!--conf-->
<!-- footer-->
<!--com-title--><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link href="weui.css" rel="stylesheet"/>
    <link href="main.css" rel="stylesheet"/>
    <script src="weui.js"></script>
    <link type="image/x-icon" href="http://on5ngaon4.bkt.clouddn.com/Mountain_64px_1120233_easyicon.net.ico" rel="shortcut icon"/>
    <title>校车查询</title>
    <style>
      .my-map { margin: 0 auto; height: 360px; }
      .my-map .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; }
      .my-map .icon-pot { height: 23px; width: 31px; }
      .my-map .icon-pot-red { background-position: -234px -5px; }
      .my-map .icon-pot-blue { background-position: -234px -55px; }
      .my-map .icon-cir { height: 31px; width: 28px; }
      .my-map .icon-cir-red { background-position: -11px -5px; }
      .amap-container{height: 100%;}
    </style>
  </head>
  <body></body>
  <div id="bus">
    <div class="weui-cells__title">切换时间</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"> 
          <label for="" class="weui-lable">时间</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select">
            <option>周一，周二，周三，周四</option>
            <option>周五</option>
            <option>周六</option>
            <option>周日</option>
          </select>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">班次列表</div>
    <div class="container">
      <div class="card">
        <div id="am" class="weui-flex">
          <div class="weui-flex__item">
            <div class="time">上午</div>
          </div>
        </div>
        <div id="pm" class="weui-flex">
          <div class="weui-flex__item"> 
            <div class="time">下午</div>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">出发30分钟后 首义路c出口 返程，5元/人</div>
        </div>
      </div>
    </div>
    <script>
      // 获取select, option Dom
      var week_select = document.getElementsByTagName("select")[0];
      var week_option = week_select.getElementsByTagName("option");
      
      function busTime() {
        // 获取显示的am，pm 列表
        var time_am = document.getElementById("am");
        var time_pm = document.getElementById("pm");
      
        // 获取显示的am，pm 列表
        var item_am_item = time_am.getElementsByClassName("weui-flex__item");
        var item_pm_item = time_pm.getElementsByClassName("weui-flex__item");
      
          // 清空am, pm 数据
          while (Boolean(item_am_item[1])){
            time_am.removeChild(item_am_item[1]);
          }
          while (Boolean(item_pm_item[1])){
            time_pm.removeChild(item_pm_item[1]);
          }          
      
      
        //数据渲染 am, pm
        for(var i = 0; i < (time[getWeekNum()].am.length); i++){
          var para=document.createElement("div");
          para.setAttribute("class","weui-flex__item")
           var node=document.createTextNode(time[getWeekNum()].am[i]);
      
          para.appendChild(node);
          time_am.appendChild(para);
        }
      
        for(var i = 0; i < (time[getWeekNum()].pm.length); i++){
          var para=document.createElement("div");
          para.setAttribute("class","weui-flex__item")
          var node=document.createTextNode(time[getWeekNum()].pm[i]);
        
          para.appendChild(node);
          time_pm.appendChild(para);
          }        
        }  
      
      // 获取用户选择位置 0-周一-四 1-周五 2- 周六 3-周日 
      function getWeekNum(){
        week_select__value = week_select.selectedIndex;
        week_option[week_select__value] = true;
        return week_select__value;
      }
      
      
      // 依据默认时间矫正当前星期
      function defaultWeek(){
        // 获取当前 星期几
        var week_now = new Date().getDay();
      
        switch (week_now) {
          case 1,2,3,4: 
            week_option[0].selected =true;
            break;
          case 5:
            week_option[1].selected =true;
            break;
          case 6:
            week_option[2].selected =true;
            break;
          case 0:
            week_option[3].selected =true;
            break;
        }
      }
      
      window.onload = function(){
        //根据当前日期确定时间
        defaultWeek();
        //渲染当前数据
        busTime();
      
        week_select.onchange = function (){
          getWeekNum();
          busTime();
        }
      }      
      
    </script>
    <script>
      time = {
            "0":{
              "am":["8:30", "10:30"],
              "pm":["12:30", "15:30", "17:30"]
            },
            "1":{
              "am":["8:30", "9:30", "10:30", "11:30"],
              "pm":["12:30", "13:30", "14:30", "15:30", "16:30", "17:30"]
            },
            "2":{
              "am":["8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30"],
              "pm":["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
            },
            "3":{
              "am":["8:30", "9:30", "10:30", "11:30"],
              "pm":["13:00", "14:00", "15:00", "16:00", "17:00"]
            }                        
          }
      
    </script>
    <div class="weui-cells__title">校车位置</div>
    <div class="container">
      <div id="wrap" class="my-map">
        <div id="mapContainer"></div>
      </div>
    </div>
    <script src="https://webapi.amap.com/maps?v=1.3&amp;key=8325164e247e15eea68b59e89200988b"></script>
    <script>
      !function(){
      var infoWindow, map, level = 15,
      
      center = {lng: 114.296115, lat: 30.441589},
      features = [{type: "Polygon", name: "乘车点", desc: "校南门，陈一丹伉俪图书馆附近", strokeWeight: 2, strokeColor: "#F0202F", strokeOpacity: 1, fillColor: "red", fillOpacity:0.2, lnglat: [{lng: 114.295093, lat: 30.4391}, {lng: 114.295088, lat: 30.438462}, {lng: 114.295646, lat: 30.438467}, {lng: 114.295635, lat: 30.439096}]},
      {type: "Marker", name: "绿迪校车", desc: "校园巴士，30分钟后返程，5元/人", color: "red", icon: "pot", offset: {x: -11, y: -26}, lnglat: {lng: 114.295335, lat: 30.438846}},
      {type: "Marker", name: "307公交站", desc: "", color: "blue", icon: "pot", offset: {x: -11, y: -26}, lnglat: {lng: 114.30005, lat: 30.440266}},
      {type: "Marker", name: "首义路c出口", desc: "超市门口返程", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 114.31052, lat: 30.533175}},
      {type: "Polygon", name: "终点站", desc: "首义路c出口，到达即返程。", strokeWeight: 2, strokeColor: "#19A4EB", strokeOpacity: 1, fillColor: "red", fillOpacity:0.7, lnglat: [{lng: 114.310397, lat: 30.533387}, {lng: 114.310343, lat: 30.533027}, {lng: 114.310703, lat: 30.532976}, {lng: 114.310756, lat: 30.533355}]},
      {type: "Polyline", name: "往返路线", desc: "", strokeWeight: 5, strokeColor: "#F0202F", strokeOpacity: 0.77, lnglat: [{lng: 114.295415, lat: 30.43866}, {lng: 114.295415, lat: 30.438231}, {lng: 114.299234, lat: 30.438342}, {lng: 114.300736, lat: 30.441783}, {lng: 114.300865, lat: 30.44378}, {lng: 114.299148, lat: 30.451476}, {lng: 114.298805, lat: 30.455249}, {lng: 114.298805, lat: 30.455915}, {lng: 114.292024, lat: 30.458949}, {lng: 114.293226, lat: 30.461242}, {lng: 114.293355, lat: 30.462167}, {lng: 114.293441, lat: 30.46446}, {lng: 114.29314, lat: 30.477813}, {lng: 114.282325, lat: 30.477739}, {lng: 114.279193, lat: 30.478368}, {lng: 114.275931, lat: 30.480106}, {lng: 114.285544, lat: 30.494233}, {lng: 114.295758, lat: 30.50492}, {lng: 114.299062, lat: 30.510836}, {lng: 114.300436, lat: 30.518119}, {lng: 114.301122, lat: 30.518969}, {lng: 114.301509, lat: 30.51945}, {lng: 114.302109, lat: 30.519524}, {lng: 114.304813, lat: 30.51982}, {lng: 114.309019, lat: 30.52189}, {lng: 114.310564, lat: 30.52274}, {lng: 114.312237, lat: 30.523701}, {lng: 114.306787, lat: 30.525439}, {lng: 114.30919, lat: 30.533497}, {lng: 114.310564, lat: 30.533276}]},
      {type: "Marker", name: "灵吴墩", desc: "万能中转公交站", color: "blue", icon: "pot", offset: {x: -11, y: -26}, lnglat: {lng: 114.276523, lat: 30.480787}}];
      function loadFeatures(){
      for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
      data = features[i];
      switch(data.type){
      case "Marker":
      feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
      zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
      content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
      break;
      case "Polyline":
      for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
      path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
      }
      feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
      strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
      break;
      case "Polygon":
      for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
      path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
      }
      feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
      strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
      fillColor: data.fillColor, fillOpacity: data.fillOpacity });
      break;
      default: feature = null;
      }
      if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
      }
      }
      function mapFeatureClick(e){
      if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
      var extData = e.target.getExtData();
      infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
      infoWindow.open(map, e.lnglat);
      }
      map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
      loadFeatures();
      }();  
      
    </script>
    <footer class="weui-footer">
      <div>
        <p> <a href="../102.data/index.html" class="weui-footer__link">版本日志</a><a href="../101.message/index.html" class="weui-footer__link">留言反馈</a></p>
      </div>
      <div>
        <p class="ueui-footer__text">Copyright &copy; 2017 信息中心</p>
      </div>
    </footer>
  </div>
</html>